<template>
    <el-dialog
        v-model="visible"
        :close-on-click-modal="false"
        :title="!dataForm.id ? '新增用户' : '修改用户'"
        draggable="true"
        width="600px"
    >
        <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="登录账号" prop="username">
                        <el-input v-model="dataForm.username" size="medium" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="phoneNum">
                        <el-input v-model="dataForm.phoneNum" size="medium" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户头像" prop="avatar">
                        <el-upload
                            :action="$http.defaults.baseURL + '/file/create'"
                            headers="$auth.getHeader()"
                            :on-success="avatarSuccess"
                            :show-file-list="false"
                            class="avatar-uploader"
                            limit="1"
                        >
                            <img v-if="dataForm.avatar" :src="dataForm.avatar" alt="" class="avatar">
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus/>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input v-model="dataForm.realName" size="medium" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否启用" prop="isEnabled">
                        <el-checkbox v-model="dataForm.isEnabled"></el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
			<span class="dialog-footer">
				<el-button size="medium" @click="visible = false">取消</el-button>
				<el-button type="primary" size="medium" @click="submit">确定</el-button>
			</span>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        data: function () {
            return {
                visible: false,
                dataForm: {
                    id: null,
                    username: null,
                    password: null,
                    realName: null,
                    avatar: null,
                    phoneNum: null,
                    isEnabled: true,
                    createTime: null,
                    updateTime: null,
                    operator: null
                },

                dataRule: {
                    realName: [{required: true, pattern: '^[\u4E00-\u9FA5A-Za-z0-9_]{2,10}$', message: '姓名为2~10位字符'}],
                    username: [{required: true, pattern: '^\\w{5,20}$', message: '登录名为5~20位字母数字下划线'}],
                    phoneNum: [{
                        required: true,
                        pattern: '^0?(13|14|15|16|17|18|19)[0-9]{9}$',
                        message: '请输入合法的手机号'
                    }]
                }
            };
        },

        mounted() {
        },

        methods: {
            open: function (id) {
                console.log(this.dataForm)
                this.visible = true;
                this.dataForm.id = id || null;
                this.$nextTick(() => {
                    this.$refs.dataForm.resetFields();
                    if (this.dataForm.id) {
                        this.$http.get('/admin/user/selectById', {params: {id: id}}).then((resp) => {
                            if (resp.success) {
                                this.dataForm = resp.data;
                            }
                        })
                    }
                });
            },

            submit() {
                this.$refs.dataForm.validate(valid => {
                    if (valid) {
                        let url = this.dataForm.id ? '/admin/user/update' : '/admin/user/create'
                        this.$http.post(url, this.dataForm).then(resp => {
                            if (resp.success) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                })
                                this.visible = false;
                                this.$emit('success');
                            }
                        })
                    }
                })
            },

            avatarSuccess(resp) {
                if (resp.success) {
                    this.dataForm.avatar = resp.data.url
                }
            },
        }
    };
</script>

<style lang="less" scoped="scoped">
    .el-form {
        .el-col {
            padding: 0 5px;
    }
    }
</style>
<style>
.avatar {
    width: 72px;
    height: 72px;
}
</style>


